Echarts隐藏背景的网格线

2023-03-19 19:55| 来源: 网络整理| 查看: 265

网格线未处理之前，默认是这样的，这个背景的网格线，我们现在如果不需要，就去掉吧。

Echarts隐藏背景的网格线属性

yAxis: { splitLine: {show: false}, },

示例代码：

// 折线图 var names = []; //类别数组（实际用来盛放X轴坐标值） var series = []; $.ajax({ url: "test.json", data: {}, type: 'GET', success: function(data) { //请求成功时执行该函数内容，data即为服务器返回的json对象 $.each(data.data, function(index, item) { names.push(item.statTime); //挨个取出类别并填入类别数组 series.push(item.noPatrolNum); }); hFun(names, series); }, }); // 心率 var hrChart = echarts.init(document.getElementById("main")); function hFun(x_data, y_data) { hrChart.setOption({ color: ['#1e63d8'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data: ['漏检次数'] }, grid: { left: '3%', right: '20%', bottom: '20%', containLabel: true }, xAxis: { splitLine: { show: false }, type: 'category', data: x_data, }, yAxis: { // 纵轴标尺固定 splitLine: { show: false }, type: 'value', scale: true, name: '漏检次数', min: 0, // 就是这两个最小值 max: 'dataMax', // 最大值 splitNumber: 10, boundaryGap: [0.2, 0.2] }, series: [{ name: '漏检次数', type: 'line', symbol: 'circle', // 折线点设置为实心点 symbolSize: 6, // 折线点的大小 data: y_data }] }, true); }

json

{ "msg": "查询成功", "code": 1, "data": [{ "statTime": "2021-01", "noPatrolNum": 12 }, { "statTime": "2021-02", "noPatrolNum": 21 },{ "statTime": "2021-03", "noPatrolNum": 28 },{ "statTime": "2021-04", "noPatrolNum": 15 }] }

隐藏背景的网格线之后界面看起来就很清爽了

【本文地址】

公司简介

联系我们